<template>
    <div class="topBar" :style="{height: imgSize, backgroundImage: 'url('+imgUrl+')'}">
        <van-loading type="spinner" v-if="showLoading"/>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "topBar",
        data() {
            return {
                showLoading: false,  // 显示 loading
                imgUrl: this.bgImgUrl || require('../../assets/images/xnjd-banner.jpg'),  // 背景图片地址
                imgSize: '4.8rem'
            }
        },
        created() {
            switch (this.styleSize) {
                case "large":
                    this.imgSize = '6.453333333333333rem'
                    break
                case "small":
                    this.imgSize = '4.8rem'
                    break
            }
        },
        mounted() {
            let bgImg = new Image()
            bgImg.src = this.imgUrl
            bgImg.onerror = () => {  // 图片加载错误
                console.log('img onerror');
            }
            bgImg.onload = () => {  // 图片加载完成
                this.showLoading = false
            }
        },
        props: ['styleSize', 'bgImgUrl']
    }
</script>

<style lang="scss" scoped>
    .topBar {
        width: $banner-w;
        height: $banner-large-h;
        background-image: url("../../assets/images/banner-1920.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    /deep/ .van-loading {
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>